<template>
  <div>
    <div class="comfirm-order-wrapper">
      <!--地址-->
      <div class="address-con">
        <div class="address-icon"></div>
        <!--没有地址得-->
        <div class="address-txt" style="display: none;">
          <div class="address-name">
            <div class="name">尚无地址</div>
            <div class="tel">去填写</div>
          </div>
        </div>
        <!--有地址-->
        <div class="address-txt" style="display: block;">
          <div class="address-name">
            <div class="name">
              <label>收货人：</label>余霞霞
            </div>
            <div class="tel">13956456324</div>
          </div>
          <div class="address">
            <span>收货地址</span>福建省厦门市四明区瞎河路411号 912室
          </div>
        </div>
        <div class="jt"></div>
      </div>
      <!--订单商品-->
      <div class="order-pro-con">
        <div class="order-top">
          <div class="order-icon"></div>
          <div class="address-txt">商品信息</div>
        </div>
        <div class="order-con">
          <div class="pro-con" v-for="(item,index) in proobj" :key="index">
            <div class="order-pro-l">
               <img :src="item.img">
            </div>
            <div class="order-pro-r">
              <div class="order-pro-tit">{{item.title}}</div>
              <div class="order-spec">
                <span>
                {{item.selectstatus}}
                </span>
              </div>
              <div class="order-price">
                <p>
                  游客价:
                  <em>{{item.zs_price}}元</em>
                </p>
                <p>
                  分销价:
                  <em>{{item.zs_price}}元</em>
                </p>
              </div>
            </div>
          </div>
          <div class="order-col">
            <div class="distribution col">
              <div class="col-l">配送方式</div>
              <div class="col-r">
                <p>{{express}}</p>
              </div>
            </div>
          </div>
          <div class="order-message">
            <span>买家留言:</span>
            <textarea class="evaluate_txt" placeholder="选填，对本次交易的说明"></textarea>
          </div>
        </div>
      </div>
      <!--底部结算-->
      <div class="order-foot">
        <div class="order-total">
          合计：
          <em>￥{{payprice}}</em>
        </div>
        <div class="order-btn">提交订单</div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
        data() {
            return {
                proobj:{},//购买商品对象
                payprice:this.getParams().totalprice,
                express:this.getParams().express,
                addressobj:{}//地址对象
            }
        },
  created() {
    this.getComProinfo()
  },
  methods: {
    getParams() {
      return payorderinfo = this.$route.query.payorderinfo;
    },
    //获取订单信息根据传过来的skuid
    getComProinfo() {
      this.$axios({
        method: "get",
        // url:"../src/data/cart.json?id=12,13,14" 传入加入购物车的商品id
        url: "../src/data/cart.json"
      }).then(res => {
        this.proobj = res.data.data;
        console.log(this.getParams())
      });
    },
    getaddressinfo(){
      this.$axios({
        method: "get",
        // url:"../src/data/cart.json?id=12,13,14" 传入加入购物车的商品id
        url: "../src/data/cart.json"
      }).then(res => {
        this.proobj = res.data.data;
        console.log(this.getParams())
      });
    }
  }
};
</script>
<style scoped>
.comfirm-order-wrapper .tip {
  width: 100%;
  padding: 0.5rem 0;
  background: #ff6160;
}
.comfirm-order-wrapper .tip p {
  text-align: center;
  color: #fff;
  font-size: 0.7rem;
  line-height: 1;
}
.comfirm-order-wrapper .tip p:nth-child(2) {
  padding-top: 0.3rem;
}
.comfirm-order-wrapper .address-con {
  padding: 0 0.75rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 4.2rem;
  box-sizing: border-box;
  background: #fff url(../../images/address-line.png) bottom center no-repeat;
  background-size: 100% 0.175rem;
}
.comfirm-order-wrapper .address-icon {
  width: 1.35rem;
  height: 1.35rem;
  margin-right: 0.5rem;
  background: url(../../images/location@2x.png) center no-repeat;
  background-size: 100% 100%;
}
.address-jt {
  width: 0.75rem;
  height: 0.75rem;
  background: url(../../images/jt.png) center no-repeat;
  background-size: 100% 100%;
}
.comfirm-order-wrapper .address-txt {
  flex: 1;
  font-size: 0.7rem;
  color: #666;
}
.address-name {
  display: flex;
}
.address-name .name {
  flex: 1;
}
.address {
  padding-top: 0.45rem;
}
.order-top {
  padding: 0 0.75rem;
  height: 2.2rem;
  background: #fff;
  background: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin-top: 0.25rem;
}
.order-top .order-icon {
  width: 1.35rem;
  height: 1.35rem;
  background: url(../../images/file-search@2x.png) center no-repeat;
  background-size: 100% 100%;
}
.order-con .pro-con {
  padding: 0.75rem;
  display: flex;
  background: #f8f8f8;
}
.order-pro-l {
  margin-right: 0.65rem;
}
.order-pro-l img {
  width: 6rem;
  height: 6rem;
}
.order-pro-r {
  flex: 1;
}
.order-pro-tit {
  font-size: 0.7rem;
  color: #000;
  line-height: 1.2;
}
.order-spec {
  padding: 0.5rem 0 0.65rem;
  font-size: 0.6rem;
  color: #666;
}
.order-spec span {
  margin-right: 0.25rem;
}
.order-price p {
  font-size: 0.7rem;
}
.order-price p:nth-child(2) {
  font-size: 0.8rem;
  padding-top: 0.3rem;
  color: #e43c3c;
}
.order-col {
  padding-left: 0.75rem;
  font-size: 0.65rem;
  background: #fff;
}
.order-col .col {
  display: flex;
  height: 2.25rem;
  line-height: 2.25rem;
  border-bottom: 0.05rem solid #e5e5e5;
}
.order-col div .col-l {
  flex: 1;
  color: #666;
}
.order-col div .col-r {
  flex: 1;
  padding-right: 0.75rem;
}
.order-col div .col-r p {
  width: 100%;
}
.balance input {
  border: 0.05rem solid #e5e5e5;
  color: #666;
  width: 2.1rem;
  height: 0.8rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.voucher {
  display: flex;
  background: #fff;
  padding-right: 0.75rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.voucher .jt {
  width: 1.1rem;
  height: 1.1rem;
  background: url(../../images/jt.png) center no-repeat;
  background-size: 100% 100%;
}
.order-message {
  font-size: 0.65rem;
  color: #666;
  background: #ffffff;
  position: relative;
}
.order-message span {
  position: absolute;
  top: 0.5rem;
  left: 0.75rem;
}
.order-message .evaluate_txt {
  display: block;
  width: 100%;
  height: 5.35rem;
  font-size: 0.65rem;
  box-sizing: border-box;
  border: none;
  padding: 0.5rem 0.75rem 0.5rem 4rem;
}
.order-foot {
  width: 100%;
  height: 2.45rem;
  line-height: 2.45rem;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fdfdfd;
  display: flex;
}
.order-total {
  flex: 1;
  text-align: right;
  font-size: 0.65rem;
  border-top: 0.05rem solid #e5e5e5;
}
.order-total em {
  font-size: 0.8rem;
  color: #e43c3c;
  margin-right: 1.25rem;
}
.order-btn {
  flex: 0 0 5.5rem;
  background: #fc1618;
  text-align: center;
  font-size: 0.9rem;
  color: #fff;
}
</style>


